"use client";
import "reflect-metadata";
import Canvas from "@/components/Canvas";
import React, { useContext, useEffect, useLayoutEffect } from "react";
import { GlobalStateContext } from "@/lib/context";
import { useRouter } from "next/navigation";
import Charts from "@/components/Charts";

export default function Home() {
    const router = useRouter();

    const { state, fetchUserInfo } = useContext(GlobalStateContext);

    useLayoutEffect(() => {
        if (fetchUserInfo) {
            const userInfo = fetchUserInfo();
            if (!userInfo.userName) {
                router.push("/login");
            }
        }
    }, []);

    // useLayoutEffect(() => {
    //     if (fetchUserInfo) {
    //     } else {
    //         console.log("state.userName:", state.userName);
    //         if (!state.userName && !state.loading) {
    //             router.push("/login");
    //         }
    //     }
    // }, [state.userName,fetchUserInfo]);

    return (
        <div>
            <Charts />
            <Canvas />
        </div>
    );
}
